<template>
  <n-card :bordered="false" style="background-color: transparent" :segmented="true">
    <template #header>
      <div>配置HTTP&HTTPS代理服务</div>
    </template>
    <n-form ref="formRef" :model="state" label-width="100" size="small" inline>
      <n-form-item label="端口" path="port">
        <n-input-number
          max="65535"
          min="0"
          v-model:value="state.port"
          style="width: 200px"
          placeholder="请输入监听端口"
        />
      </n-form-item>
      <n-form-item label="模式" path="mode">
        <n-select
          placeholder="请选择连接模式"
          :options="connectionModeOptions"
          v-model:value="state.mode"
          style="width: 200px"
        ></n-select>
      </n-form-item>
      <n-form-item label="代理服务节点" path="serverId" v-if="state.mode !== 'DIRECT'">
        <n-select
          :options="serversOptions"
          placeholder="请选择代理服务节点"
          v-model:value="state.serverId"
          style="width: 300px"
        ></n-select>
      </n-form-item>
      <n-form-item>
        <n-button size="small" type="primary" @click="changeService">保存</n-button>
      </n-form-item>
    </n-form>
    <n-data-table
      class="connection-info-table"
      :columns="columns"
      :data="connectionRules"
      :bordered="true"
      max-height="350"
      style="background-color: transparent"
    />
  </n-card>
</template>

<script setup lang="ts">
import { h, onMounted, ref } from "vue"
import { type DataTableColumns, NButton, type SelectOption } from "naive-ui"
import {
  type ConnectionRule,
  doChangeService,
  doQueryConnectionRule,
  doQueryState,
  type HttpHttpsProxyState
} from "@/api/client/http-https-proxy-api"
import moment from "moment"
import { doQueryServerNode } from "@/api/client/server-management-api"

const connectionModeOptions: Array<SelectOption> = [
  {
    label: "全局直连",
    value: "DIRECT"
  },
  {
    label: "全局代理",
    value: "PROXY"
  },
  {
    label: "规则模式",
    value: "RULE"
  }
]

const state = ref<HttpHttpsProxyState>({
  port: 0,
  mode: "DIRECT",
  serverId: null as any
})

function queryState() {
  doQueryState().then((res) => {
    state.value = res.data
  })
}

const content = (str: string) => {
  return h(
    "span",
    {
      style: {
        color: "var(--primary-color)"
      }
    },
    " " + str + " "
  )
}
const generateRule = (row: ConnectionRule) => {
  switch (row.method) {
    case "END_WITH":
      return ["目标地址以", content(row.content), "结尾"]
    case "START_WITH":
      return ["目标地址以", content(row.content), "开头"]
    case "CONTAINS":
      return ["目标地址包含", content(row.content)]
    case "EQUALS":
      return ["目标地址是", content(row.content)]
  }
}

const columns: DataTableColumns<ConnectionRule> = [
  {
    title: "序号",
    key: "id",
    width: 100
  },
  {
    title: "规则",
    key: "rule",
    render: (row: ConnectionRule) => h("div", {}, generateRule(row))
  },
  {
    title: "策略",
    key: "action",
    width: 150,
    render: (row: ConnectionRule) => {
      switch (row.action) {
        case "PROXY":
          return h(
            "span",
            {
              style: {
                color: "var(--info-color)"
              }
            },
            "代理"
          )
        case "DIRECT":
          return h(
            "span",
            {
              style: {
                color: "var(--primary-color)"
              }
            },
            "直连"
          )
        case "REJECT":
          return h(
            "span",
            {
              style: {
                color: "var(--error-color)"
              }
            },
            "拒绝"
          )
      }
    }
  },
  {
    title: "创建时间",
    key: "createTime",
    width: 200,
    render: (row: ConnectionRule) => moment(row.createTime).format("yyyy-MM-DD HH:mm:ss")
  },
  {
    title: "更新时间",
    key: "updateTime",
    width: 200,
    render: (row: ConnectionRule) => moment(row.updateTime).format("yyyy-MM-DD HH:mm:ss")
  }
]

const connectionRules = ref<Array<ConnectionRule>>([])

function queryConnectionRule() {
  doQueryConnectionRule().then((res) => {
    connectionRules.value = res.data
  })
}

function changeService() {
  doChangeService(state.value.port, state.value.mode, state.value.serverId).then((res) => {
    if (res.data) {
      window.$message.success("更新成功!")
    }
  })
}

const serversOptions = ref<Array<SelectOption>>([])

function queryServerNode() {
  doQueryServerNode().then((res) => {
    serversOptions.value = []
    res.data.forEach((e) => {
      const option: SelectOption = {
        label: e.ping + " ms ，" + e.name,
        value: e.id
      }
      serversOptions.value.push(option)
    })
  })
}

onMounted(() => {
  queryState()
  queryConnectionRule()
  queryServerNode()
})
</script>
<style scoped lang="scss">
.connection-info-table {
  --n-th-color: transparent !important;
  --n-td-color: transparent !important;
  --n-td-color-hover: rgba(150, 150, 150, 0.1) !important;
  background-color: transparent;
}
</style>
